<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    
    <ui:composition template="/shared/_layout.xhtml">
        <ui:define name="title">
                <h:outputText value="#{lang._account_register_title}"/>
        </ui:define>
        <ui:define name="css">
            <h:outputStylesheet name="form.css" library="css" />
        </ui:define>
        <ui:define name="content">
            <h1>
                <h:outputText value="#{lang._account_register_register}"/>
            </h1>
            <h:form>
                <article>
                    <p>
                        <h:outputText value="#{lang._account_register_required}"/>
                    </p>
                    <p>
                        <h:messages errorClass="errorMessage" infoClass="infoMessage"
                                    warnClass="warnMessage"/>
                    </p>
                </article>
                <article>
                    <h2>
                        <h:outputText value="#{lang._account_register_informations}"/>
                    </h2>
                    <p>
                        <h:outputLabel for="firstname" value="#{lang._account_register_firstname}"/>
                        <h:inputText id="firstname" maxlength="45" size="36"
                                     label="#{lang._account_register_firstname}"
                                     required="true" value="#{registration.user.firstname}"/>
                    </p>
                    <p>
                        <h:outputLabel for="lastname" value="#{lang._account_register_lastname}"/>
                        <h:inputText id="lastname" maxlength="45" size="36"
                                     label="#{lang._account_register_lastname}"
                                     required="true" value="#{registration.user.lastname}"/>
                    </p>
                    <p>
                        <h:outputLabel for="city" value="#{lang._account_register_city}"/>
                        <h:inputText id="city" maxlength="45" size="45"
                                     label="#{lang._account_register_city}"
                                     required="true" value="#{registration.user.city}">
                            <f:validateLength minimum="3" maximum="45"/>
                        </h:inputText>
                    </p>
                    <p>
                        <h:outputLabel for="country" value="#{lang._account_register_country}"/>
                        <h:selectOneMenu id="country" value="#{registration.user.country}">
                            <f:selectItem itemValue="France Metropolitaine" itemLabel="France Metropolitaine"/>
                            <f:selectItem itemValue="France DOM" itemLabel="France DOM"/>
                            <f:selectItem itemValue="France TOM" itemLabel="France TOM"/>
                            <f:selectItem itemValue="Belgique" itemLabel="Belgique"/>
                        </h:selectOneMenu>
                    </p>
                    <p>
                        <h:outputLabel for="email" value="#{lang._account_register_email}"/>
                        <h:inputText id="email" maxlength="255" size="64"
                                     required="true" value="#{registration.user.email}"
                                     label="#{lang._account_register_email}">
                            <f:validateLength minimum="6" maximum="255"/>
                            <f:validator validatorId="emailValidator"/>
                        </h:inputText>
                    </p>
                    <p>
                        <h:outputLabel for="address" value="#{lang._account_register_address}"/>
                        <h:inputText id="address" maxlength="100" size="64"
                                     required="true" value="#{registration.user.address}"
                                     label="#{lang._account_register_address}">
                            <f:validateLength minimum="5" maximum="100"/>
                        </h:inputText>
                    </p>
                    <p>
                        <h:outputLabel for="zip" value="#{lang._account_register_zipcode}"/>
                        <h:inputText id="zip" maxlength="5" size="5"
                                     required="true" value="#{registration.user.zip}"
                                     label="#{lang._account_register_zipcode}">
                            <f:validateLength minimum="5" maximum="5"/>
                            <f:validator validatorId="zipCodeValidator"/>
                        </h:inputText>
                    </p>
                </article>
                <article>
                    <h2>
                        <h:outputText value="#{lang._account_register_account}"/>
                    </h2>
                    <p>
                        <h:outputLabel for="username" value="#{lang._account_register_username}"/>
                        <h:inputText id="username" maxlength="45" size="35"
                                     label="#{lang._account_register_username}"
                                     required="true" value="#{registration.user.username}"/>
                    </p>
                    <p>
                        <h:outputLabel for="password" value="#{lang._account_register_password}"/>
                        <h:inputSecret id="password" maxlength="45" size="36"
                                     label="#{lang._account_register_password}"
                                       required="true" value="#{registration.user.password}"/>
                    </p>
                    <p>
                        <h:outputLabel for="confirmPassword" value="#{lang._account_register_confirm_password}"/>
                        <h:inputSecret id="confirmPassword" maxlength="45" size="36"
                                     label="#{lang._account_register_confirm_password}"
                                       required="true" value="#{registration.passwordConfirmation}"/>
                    </p>
                </article>
                <article>
                    <p>
                        <h:commandButton value="#{lang._account_register_save}" action="#{registration.save()}"/>
                        <h:outputText value="&#160;" />
                        <h:commandButton value="#{lang._account_register_reset}" type="reset"/>
                    </p>
                </article>
            </h:form>
        </ui:define>
    </ui:composition>
</html>